import React from 'react';
import logo from '../../logo.svg';
import './myheader.css';
import 'antd/dist/antd.css'
import {Layout , Typography , Input} from 'antd'
import { Menu, Dropdown, Button, Space} from 'antd';
import {GlobalOutlined} from '@ant-design/icons';
import {useHistory} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {changelanguageActionCreator} from "../../redux/Language/languageaction";
import {RootState} from "../../redux/store/store";
import {useSelector,useDispatch} from 'react-redux'
import jwd_decode,{JwtPayload} from'jwt-decode'
import {useState,useEffect} from 'react'
import {LoginSlice} from "../../redux/LoginIn/slice";

const { Title ,Text} = Typography;
const {Search}=Input;

interface myJwtPayLoad extends JwtPayload{
    username:string
}
const MyHeaderFunc:React.FC=()=>{
    const history=useHistory();
    const dispatch=useDispatch();
    const language=useSelector((state:RootState)=>state.language.language);
    const languagelist=useSelector((state:RootState)=>state.language.languagelist);
    const jwt=useSelector((state:RootState)=>state.userlogin.token);//
    const addloading=useSelector((state:RootState)=>state.buycar.isloading)
    const buycarlist=useSelector((state:RootState)=>state.buycar.buycarproducts)
    const [username,setusername]=useState("");
    const {t}=useTranslation();
    const menuclickhandle=(event:any)=>{
        dispatch(changelanguageActionCreator(event.key));
    }
    const loginout=()=>{
        dispatch(LoginSlice.actions.loginout());
        history.push('/home');
    }

    useEffect(()=>{
        if(jwt!==null){
            const token=jwd_decode<myJwtPayLoad>(jwt);
            setusername(token.username);
        }
    },[jwt])
    return (
    <div className="MyHeader">
        <div className="proheader">
            <div className="headertop">
                <Text className="headertext">{t("header.slogan")}</Text>
                <Dropdown overlay={
                    <Menu onClick={menuclickhandle}>
                        {
                            languagelist.map((item)=>(
                                <Menu.Item key={item.code}>{item.name}</Menu.Item>
                            ))
                        }
                    </Menu>
                }  className="languageselect">
                    <Button>
                        {language==="en"?"English":"中文"} <GlobalOutlined />
                    </Button>
                </Dropdown>
                <Space size={0}  className="islogin">
                    {
                        jwt ?
                            (<>
                                <Button onClick={()=>{history.push('/buycar')}} loading={addloading}>{t("header.shoppingCart")} {buycarlist.length}</Button>
                                <Button onClick={loginout}>{t("header.signOut")}</Button>
                                <span style={{marginLeft:'20px'}}>{t("header.welcome")},{username}</span>
                            </>)
                        :
                        (<><Button onClick={()=>{history.push('/register')}}>{t("header.register")}</Button>
                        <Button onClick={()=>{history.push('/login')}}>{t("header.signin")}</Button></>)
                    }
                </Space>
            </div>
            <Layout.Header className="headersearch">
                <Title level={3} className="headertitle">
                    <img src={logo} className="App-logo" alt="logo" />
                    {t("header.title")}
                </Title>
                <Search onSearch={(keyword)=>{history.push('/search/'+keyword)}} className="search" placeholder="请输入旅游目的地、主题、或关键字" enterButton />
            </Layout.Header>
            <Layout.Header className="tabbar">
                <Menu mode={"horizontal"} className="topmenu">
                    <Menu.Item key="1">{t("header.home_page")}</Menu.Item>
                    <Menu.Item key="2">{t("header.weekend")}</Menu.Item>
                    <Menu.Item key="3">{t("header.group")}</Menu.Item>
                    <Menu.Item key="4">{t("header.backpack")}</Menu.Item>
                    <Menu.Item key="5">{t("header.private")}</Menu.Item>
                    <Menu.Item key="6">{t("header.cruise")}</Menu.Item>
                    <Menu.Item key="7">{t("header.hotel")}</Menu.Item>
                    <Menu.Item key="8">{t("header.local")}</Menu.Item>
                    <Menu.Item key="9">{t("header.theme")}</Menu.Item>
                    <Menu.Item key="10">{t("header.custom")}</Menu.Item>
                    <Menu.Item key="11">{t("header.study")}</Menu.Item>
                    <Menu.Item key="12">{t("header.visa")}</Menu.Item>
                    <Menu.Item key="13">{t("header.enterprise")}</Menu.Item>
                    <Menu.Item key="14">{t("header.high_end")}</Menu.Item>
                    <Menu.Item key="15">{t("header.outdoor")}</Menu.Item>
                    <Menu.Item key="16">{t("header.insurance")}</Menu.Item>
                </Menu>
            </Layout.Header>
        </div>
    </div>
    )
}
export default MyHeaderFunc;